<template>
    <div class="login-box">
        <h1>电商运营管理系统</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" autocomplete="off" :prefix-icon="UserFilled" size="large"
                    placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock"
                    size="large" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>

            </el-form-item>
        </el-form>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { user } from "@/api"
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const userStore = useUserStore()

const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('Please input the age'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('Please input digits'))
        } else {
            if (value < 18) {
                callback(new Error('Age must be greater than 18'))
            } else {
                callback()
            }
        }
    }, 1000)
}


const validatePassword = (rule: any, value: string, callback: any) => {
    if (value === '') {
        callback(new Error('密码不能为空'))
    }
    callback()

}

const ruleForm = reactive({
    username: '',
    password: '',

})

const rules = reactive({
    username: [{ required: true, message: '请输入用户名字', trigger: 'blur' },],
    password: [{ validator: validatePassword, trigger: 'blur' }],

})

const submitForm = (formEl: FormInstance | undefined) => {


    if (!formEl) return
    formEl.validate((valid) => {
        // if (valid) {
        //     console.log('submit!')
        // } else {
        //     console.log('error submit!')
        //     return false
        // }
        if (!valid) {
            return false
        }
        user.loginApi(ruleForm).then(res => {
            console.log(res);
            if (res.code === 200) {
                //先存储token
                localStorage.setItem('token', res.data.tokenHead + res.data.token)
                //提示用户
                ElMessage.success("成功登录")
                //跳转页面
                router.push('/index')

                // 发请求获取用户信息
                // user.userDataApi().then(res => {
                //     if (res.code === 200) {
                //         // console.log(res.data.menus);
                //         userStore.menus = res.data.menus
                //     }

                // })
            }
        })


    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="less" scoped>
.login-box {
    width: 400px;
    // height: 100vh;  

    margin: 150px auto 0;

    h1 {
        font-size: 32px;
        text-align: center;
    }

    .el-button {
        width: 100%;

    }

    :deep(.el-input__wraper) {
        background-color: transparent;
    }

    :deep(.el-inner) {
        color: #fff;
    }

}
</style>